<template>
    <view class="recommend-box" v-if="tabs.length > 0">
        <mescroll ref="mescrollRef" @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback" :up="upOption" v-if="tabs.length > 0" @scroll="scroll">
            <view class="follow-friend df-cen-rl margin-top" v-if="friendsList.length > 0">
                <view class="follow-friend-left" @click="jumpAnchorList">
                    <view class="df-ai-cen">
                        <view>您关注的好友正在直播</view>
                        <view class="df-ai-cen">
                            <view class="cu-avatar-group">
                                <view class="cu-avatar sm round" v-for="(item, inx) in friendsList" :key="inx" :style="'background-image:url(' + $util.img(item.headimg) + ')'"></view>
                            </view>
                            <image :src="staticImgUrl + 'home/left_feng.png'" mode="widthFix" style="width: 20rpx;">
                            </image>
                        </view>
                    </view>
                </view>
                <view @click="jumpAnchorList">
                    <image :src="staticImgUrl + 'home/foole_rught.png'" mode="widthFix" style="width: 85rpx;"></image>
                </view>
            </view>
            <!-- 主播推荐 -->

            <view class="anchor">
                <view class="anchor_more">
                    <view class="more_title">主播推荐</view>
                    <view class="more_btn">
                        <view class="btn_tit">更多</view>
                        <image :src="$util.imgPath('more.png')"></image>
                    </view>
                </view>
                <view class="anchor_list">
                    <scroll-view class="list_scroll" scroll-x="true">
                        <view class="scroll_item" v-for="(item, inx) in liveUserList" :key="inx" @click="gotos(item)">
                            <view class="item_head">
                                <image class="head_online" :src="item.headimg" v-if="item.headimg"></image>
                                <image class="head_default" src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png" v-else></image>
                            </view>
                            <view class="item_name">{{item.nickname|| '匿名'}}</view>
                        </view>
                    </scroll-view>
                </view>
            </view>

            <!-- 好货热播 -->
            <block v-if="hotList.length > 0">
                <GoodHotPlayer :listArr="hotList" @liveCall="liveFn"></GoodHotPlayer>
            </block>

            <!-- <block v-if="hotList.length > 0">
                <hot-broadcast :listArr="hotList" @liveCall="liveFn" :listArrTwo="listArrTwo"></hot-broadcast>
            </block> -->
            <!-- #ifdef H5 -->
            <view>
                <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
                <menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="fixedShow" :tab-width="142" @change="tabBtn" backColor="transparent" lineColor="transparent"></menu-tabs>
                <menu-tabs v-model="tabIndex" :tabs="tabs" v-else :fixed="fixedShow" @change="tabBtn" backColor="transparent" lineColor="transparent"></menu-tabs>
            </view>
            <view class="recommend-mescroll margin-top">
                <waterfall-flow :allList="dataList" @flowcall="flowcallFn"></waterfall-flow>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <!-- <block v-if="wxappc=='https://www.kanfoshan.cn/'">
                <view>
                    <menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="fixedShow" :tab-width="142" @change="tabBtn" backColor="transparent" lineColor="transparent"></menu-tabs>
                    <menu-tabs v-model="tabIndex" :tabs="tabs" v-else :fixed="fixedShow" @change="tabBtn" backColor="transparent" lineColor="transparent"></menu-tabs>
                </view>
                <view class="recommend-mescroll margin-top">
                    <waterfall-flow :allList="dataList" @flowcall="flowcallFn"></waterfall-flow>
                </view>
            </block> -->
            <!-- #endif -->
        </mescroll>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import WaterfallFlow from '@/common/components/waterfall-flow.vue'
import GoodHotPlayer from '@/common/components/GoodHotPlayer/GoodHotPlayer.vue'
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			isShowSticky: false,
			mescroll: null,
			hotList: [],
			tabs: [],
			tabIndex: 0,
			contentObj: {
				category_id: '',
				page: 1,
				page_size: 10
			},
			dataList: [],
			friendsList: [], // 好友直播
			liveUserList: [], // 推荐主播
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				onScroll: true,
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				},
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				},
				textNoMore: '暂无更多数据...'
			},
			wxappc: '',
			fixedShow: false,
			listArrTwo: []
		}
	},
	onLoad(e) { },
	onShow(e) {
		
	},
	components: {
		WaterfallFlow,
		GoodHotPlayer
	},
	methods: {
		scroll() {
			// console.log('当前滚动条的位置:' + this.mescroll.scrollTop)
			if (this.mescroll.scrollTop > 750) {
				this.fixedShow = true
			} else {
				this.fixedShow = false
			}
		},
		jumpAnchorList() {
			this.$util.redirectTo('/livePages/live/anchor-list')
		},

		gotos(item) {
			console.log(item)
			if (!this.$util.isLoginCall()) return false
			if (item.site_id != undefined && item.site_id != 0) {
				this.$util.redirectTo('/livePages/creation/produce', {
					site_id: item.site_id,
					member_id: item.member_id
				})
			} else {
				this.$util.redirectTo('/livePages/creation/creation', {
					member_id: item.member_id
				})
			}
		},
		async initData() {
			// // 获取关注主播
			this.$request
				.getRecommendUser({
					page: 1,
					page_size: 5
				})
				.then(res => {
					console.log('initData', res.data.list)
					this.liveUserList = res.data.list
				})

			// // 获取关注正在开播的主播
			if (uni.getStorageSync('token')) {
				this.$request.getFollowingLive({
					page: 1,
					page_size: 10
				}).then(res => {
					let data = [{
						live_id: 80, // 直播ID
						headimg: 'wMDAwMDAwMMjbr6mQiWPLj4iuy8WLiJmGzpOqrdCIaZV40', // 头像
						username: '18569065348' // 用户名
					}]
					this.friendsList = res.data.splice(0, 3)
				})
			}
			// // 获取热播
			// //
			await this.$request
				.getLiveList({
					page: 1,
					page_size: 3
				}).then(res => {
					this.hotList = res.data.list
					console.log(res, '213123')
				})
			// 获取预告
			await this.$request.getNoticeList({
				page_index: 1,
				page_size: 10
			}).then(res => {
				this.hotList = [].concat(res.data.list, this.hotList)
				console.log(this.hotList)
			})
		},
		tabBtn(val) {
			this.contentObj.category_id = this.tabs[val].id
			this.mescroll.resetUpScroll()
			this.tabIndex = val
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调, 有3种处理方式:*/
		downCallback(e) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.wxappc = uni.getStorageSync('BASEURL')
				console.log('BASEURL==>', uni.getStorageSync('BASEURL'))
				this.mescroll.endSuccess(0)
			} else {
				this.wxappc = uni.getStorageSync('BASEURL')
				console.log('BASEURL==>', uni.getStorageSync('BASEURL'))
			}
			// #endif
			this.initData()
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调*/
		upCallback(page) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
			} else {
				this.wxappc = uni.getStorageSync('BASEURL')
				console.log('BASEURL==>', uni.getStorageSync('BASEURL'))
			}
			// #endif
			/* ===================*/
			// console.log('456465', page, this.contentObj);
			this.contentObj.page = page.num
			this.contentObj.page_size = page.size
			// 如果是第一页需手动制空列表
			if (page.num == 1) this.dataList = []
			this.$request
				.getContentList(this.contentObj)
				.then(res => {
					this.dataList = this.dataList.concat(...res.data.list)
					// console.log('res.listres.listres.list', this.dataList);
					this.mescroll.endSuccess(res.data.list.length, res.data.list.length >= 6)
				})
				.catch(() => {
					// 联网失败, 结束加载
					this.mescroll.endErr()
				})
			// this.mescroll.endByPage(curPageLen, totalPage)
			/* ===================*/
			// 此处仍可以继续写其他接口请求...
			// 调用其他方法...
		},
		// 瀑布流单个点击回调
		flowcallFn(val) {
			if (val.type == 'video') {
				// #ifdef H5
				if (this.env.includes('NativeApp')) {
					this.$sdk.videoDetailPage(val.id)
					return
				}
				// #endif
				this.$util.redirectTo('/livePages/video/video', {
					video_id: val.id
				})
			} else {
				this.$util.redirectTo('/livePages/details/details', {
					content_id: val.id
				})
			}
			console.log('瀑布流单个点击回调', val)
		},
		liveFn(val) {
			console.log('qwe1q2313', val)
			if (val.replay_url == null) {
				// #ifdef H5
				let sUserAgent = navigator.userAgent.toLowerCase()
				var isHuawei = sUserAgent.match(/huawei/i) == 'huawei'
				var isHonor = sUserAgent.match(/honor/i) == 'honor'
				if (isHuawei || isHonor) {
					let url = 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/index.html#/xmg/live?live_id=' +
                        val.id
					location.href = url
				} else {
					if (this.env.includes('NativeApp')) {
						this.$sdk.startAudience(val.id)
						return
					}

					this.$util.redirectTo('/livePages/live/live', {
						live_id: val.id
					})
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.$util.redirectTo('/livePages/live/live', {
					live_id: val.id
				})
				// #endif
			} else {

				// #ifdef H5
				if (this.env.includes('NativeApp')) {
					this.$sdk.startAudience(val.id)
					return
				}
				// #endif
				this.$util.redirectTo('/livePages/live/replay', {
					live_id: val.id
				})
			}
		},
		delFollowBtn(item) {
			var that = this
			if (!this.$util.isLoginCall()) return false
			uni.showModal({
				title: '温馨提示',
				content: '是否确定取消关注?',
				success: res => {
					if (res.confirm) {
						this.$request
							.deleteMemberFollow({
								followers_id: item.member_id
							})
							.then(res => {
								// 获取关注主播
								this.$request
									.getRecommendUser({
										page: 1,
										page_size: 5
									})
									.then(res => {
										this.liveUserList = []
										this.liveUserList = res.data.list
									})
							})
					}
				}
			})
		},
		addFollowBtn(item) {
			var that = this
			if (!this.$util.isLoginCall()) return false
			this.$request
				.addFollow({
					followers_id: item.member_id
				})
				.then(res => {
					// 获取关注主播
					this.$request
						.getRecommendUser({
							page: 1,
							page_size: 5
						})
						.then(res => {
							this.liveUserList = []
							this.liveUserList = res.data.list
						})
				})
		}
	},
	mounted() {
		console.log('撒大声地')
		this.$request
			.getCategoryList({
				type: 2
			})
			.then(res => {
				this.contentObj.category_id = res.data[0].id
				this.tabs = res.data
			})
	}
}
</script>

<style lang="scss">
.recommend-box {
    height: 100%;
    padding: 0 0 0 24rpx;
    background: linear-gradient(180deg, #ffffff, #eeeeee);

    .recommend-title {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
    }

    .follow-friend {
        padding: 30rpx;
        border-radius: 30rpx;
        background: linear-gradient(90deg, #fae6c1, #fef5e4);
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #99622c;
        margin-bottom: 20rpx;
    }

    .recommend-anchor {
        .recommend-conten {
            padding: 40rpx 0;
        }

        .anchor-item {
            width: 120rpx;
            margin-right: 26rpx;
        }

        .anchor-avatar {
            position: relative;
        }

        .anchor-btn {
            line-height: 22px;
            color: #ffffff;
            background: linear-gradient(90deg, #ff7124, #ff364e);
            white-space: nowrap;
        }

        .anchor-item-name {
            min-height: 70rpx;
            width: 100%;
            padding: 10rpx 0 20rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
        }
    }

    .recommend-mescroll {
        width: 100%;
    }
}

.logos {
    background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png");
}

.anchor {
    width: 702rpx;
    height: 178rpx;
    border-radius: 8rpx;
    overflow: hidden;
    display: flex;

    &_more {
        width: 170rpx;
        height: 100%;
        background-color: #ffd332;
        text-align: center;
        border-radius: 8rpx;

        .more_title {
            margin-top: 52rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #000000;
        }

        .btn_tit {
            margin-right: 8rpx;
            font-weight: 400;
            color: #000000;
            font-size: 22rpx;
        }

        .more_btn {
            margin-left: 26rpx;
            display: flex;
            align-items: center;

            image {
                width: 24rpx;
                height: 24rpx;
            }
        }
    }

    &_list {
        flex: 1;

        .list_scroll {
            width: 531rpx;
            overflow: hidden;
            white-space: nowrap;

            .scroll_item {
                display: inline-block;
                height: 100%;
                margin-right: 20rpx;
                margin-top: 20rpx;

                .item_head {
                    width: 102rpx;
                    height: 102rpx;
                    border-radius: 50%;
                    overflow: hidden;

                    image {
                        width: 102rpx;
                        height: 102rpx;
                    }
                }

                .item_name {
                    text-align: center;
                    width: 102rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #000000;
                    font-size: 26rpx;
                    font-weight: 500;
                }
            }

            .scroll_item:nth-child(1) {
                margin-left: 20rpx;
            }
        }
    }
}
</style>
